@mixin grid-box($isCenter: false, $isColumn: false) {
  display: grid;

  @if $isCenter {
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
  }

  @if $isColumn {
    grid-template-columns: 1fr;
    align-content: start;

    //直接子元素宽度100%
    & > * {
      width: 100%;
    }
  }
}

@mixin flex-box($isCenter: false, $isColumn: false) {
  display: flex;

  @if $isCenter {
    align-items: center;
    justify-content: center;
  }

  @if $isColumn {
    flex-direction: column;
  }
}

@mixin full-box {
  height: 100%;
  width: 100%;
}

@mixin full-page {
  height: 100vh;
  width: 100vw;
}

@mixin rows-ellipsis($line: 2) {
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@mixin grid-space-between {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  > :first-child {
    justify-self: start;
  }

  > :last-child {
    justify-self: end;
  }
}

@mixin black-box {
  background: $black;
  color: $white;
}

@mixin white-box {
  background: $white;
  color: $black;
}
